<!--
 * @Author: FanWeiHua
 * @Date: 2021-07-30 17:26:01
 * @LastEditTime: 2021-07-30 18:47:41
 * @Description: demo1
-->
<template>
  <section>
    <div>
      <svg width="200px" height="50px" style="transform: scale(1, 1)">
        <!---->
        <rect fill="#fff" x="17.797619047619047" y="8.75" width="2.5" height="2.5"><!----></rect>
        <!----><!---->
        <rect fill="#fff" x="46.36904761904762" y="8.75" width="2.5" height="2.5"><!----></rect>
        <!----><!----><!----><!----><!----><!---->
        <rect fill="#fff" x="113.03571428571428" y="8.75" width="2.5" height="2.5"><!----></rect>
        <rect fill="#fff" x="122.55952380952381" y="8.75" width="2.5" height="2.5">
          <animate
            attributeName="fill"
            values="#fff;transparent"
            dur="1s"
            begin="0.2276116599183382"
            repeatCount="indefinite"
          ></animate>
        </rect>
        <rect fill="#fff" x="132.08333333333334" y="8.75" width="2.5" height="2.5"><!----></rect>
        <rect fill="#fff" x="141.60714285714286" y="8.75" width="2.5" height="2.5"><!----></rect>
        <rect fill="#fff" x="151.13095238095238" y="8.75" width="2.5" height="2.5">
          <animate
            attributeName="fill"
            values="#fff;transparent"
            dur="1s"
            begin="0.054583806157765036"
            repeatCount="indefinite"
          ></animate>
        </rect>
        <rect fill="#fff" x="160.6547619047619" y="8.75" width="2.5" height="2.5">
          <animate
            attributeName="fill"
            values="#fff;transparent"
            dur="1s"
            begin="1.346010407541006"
            repeatCount="indefinite"
          ></animate>
        </rect>
        <!---->
        <rect fill="#fff" x="179.70238095238096" y="8.75" width="2.5" height="2.5">
          <animate
            attributeName="fill"
            values="#fff;transparent"
            dur="1s"
            begin="0.24185208542065117"
            repeatCount="indefinite"
          ></animate>
        </rect>
        <!----><!----><!----><!---->
        <rect fill="#fff" x="36.845238095238095" y="18.75" width="2.5" height="2.5">
          <animate
            attributeName="fill"
            values="#fff;transparent"
            dur="1s"
            begin="0.12993631424389918"
            repeatCount="indefinite"
          ></animate>
        </rect>
        <rect fill="#fff" x="46.36904761904762" y="18.75" width="2.5" height="2.5">
          <animate
            attributeName="fill"
            values="#fff;transparent"
            dur="1s"
            begin="0.28597461070422714"
            repeatCount="indefinite"
          ></animate>
        </rect>
        <!----><!---->
        <rect fill="#fff" x="74.94047619047619" y="18.75" width="2.5" height="2.5">
          <animate
            attributeName="fill"
            values="#fff;transparent"
            dur="1s"
            begin="1.2865652747807999"
            repeatCount="indefinite"
          ></animate>
        </rect>
        <rect fill="#fff" x="84.46428571428571" y="18.75" width="2.5" height="2.5"><!----></rect>
        <rect fill="#fff" x="93.98809523809524" y="18.75" width="2.5" height="2.5"><!----></rect>
        <!---->
        <rect fill="#fff" x="113.03571428571428" y="18.75" width="2.5" height="2.5"><!----></rect>
        <!---->
        <rect fill="#fff" x="132.08333333333334" y="18.75" width="2.5" height="2.5"><!----></rect>
        <rect fill="#fff" x="141.60714285714286" y="18.75" width="2.5" height="2.5"><!----></rect>
        <rect fill="#fff" x="151.13095238095238" y="18.75" width="2.5" height="2.5"><!----></rect>
        <rect fill="#fff" x="160.6547619047619" y="18.75" width="2.5" height="2.5"><!----></rect>
        <!----><!---->
        <rect fill="#fff" x="189.22619047619048" y="18.75" width="2.5" height="2.5"><!----></rect>
        <rect fill="#fff" x="8.273809523809524" y="28.75" width="2.5" height="2.5">
          <animate
            attributeName="fill"
            values="#fff;transparent"
            dur="1s"
            begin="0.7186675150446415"
            repeatCount="indefinite"
          ></animate>
        </rect>
        <!---->
        <rect fill="#fff" x="27.32142857142857" y="28.75" width="2.5" height="2.5"><!----></rect>
        <!----><!----><!----><!---->
        <rect fill="#fff" x="74.94047619047619" y="28.75" width="2.5" height="2.5">
          <animate
            attributeName="fill"
            values="#fff;transparent"
            dur="1s"
            begin="0.9731637178730912"
            repeatCount="indefinite"
          ></animate>
        </rect>
        <!----><!----><!----><!---->
        <rect fill="#fff" x="122.55952380952381" y="28.75" width="2.5" height="2.5"><!----></rect>
        <!----><!----><!---->
        <rect fill="#fff" x="160.6547619047619" y="28.75" width="2.5" height="2.5">
          <animate
            attributeName="fill"
            values="#fff;transparent"
            dur="1s"
            begin="0.10964996356897672"
            repeatCount="indefinite"
          ></animate>
        </rect>
        <rect fill="#fff" x="170.17857142857142" y="28.75" width="2.5" height="2.5">
          <animate
            attributeName="fill"
            values="#fff;transparent"
            dur="1s"
            begin="1.1383010401035767"
            repeatCount="indefinite"
          ></animate>
        </rect>
        <!----><!----><!----><!---->
        <rect fill="#fff" x="27.32142857142857" y="38.75" width="2.5" height="2.5">
          <animate
            attributeName="fill"
            values="#fff;transparent"
            dur="1s"
            begin="0.8569598984900164"
            repeatCount="indefinite"
          ></animate>
        </rect>
        <!----><!---->
        <rect fill="#fff" x="55.89285714285714" y="38.75" width="2.5" height="2.5"><!----></rect>
        <!---->
        <rect fill="#fff" x="74.94047619047619" y="38.75" width="2.5" height="2.5">
          <animate
            attributeName="fill"
            values="#fff;transparent"
            dur="1s"
            begin="1.0377215250233824"
            repeatCount="indefinite"
          ></animate>
        </rect>
        <rect fill="#fff" x="84.46428571428571" y="38.75" width="2.5" height="2.5"><!----></rect>
        <rect fill="#fff" x="93.98809523809524" y="38.75" width="2.5" height="2.5"><!----></rect>
        <!----><!----><!---->
        <rect fill="#fff" x="132.08333333333334" y="38.75" width="2.5" height="2.5">
          <animate
            attributeName="fill"
            values="#fff;transparent"
            dur="1s"
            begin="1.2689542172315376"
            repeatCount="indefinite"
          ></animate>
        </rect>
        <!----><!---->
        <rect fill="#fff" x="160.6547619047619" y="38.75" width="2.5" height="2.5">
          <animate
            attributeName="fill"
            values="#fff;transparent"
            dur="1s"
            begin="0.6782097942923482"
            repeatCount="indefinite"
          ></animate>
        </rect>
        <rect fill="#fff" x="170.17857142857142" y="38.75" width="2.5" height="2.5"><!----></rect>
        <!----><!---->
        <rect fill="#0de7c2" x="187.97619047619048" y="17.5" width="5" height="5">
          <animate attributeName="width" values="0;5" dur="2s" repeatCount="indefinite"></animate>
          <animate attributeName="height" values="0;5" dur="2s" repeatCount="indefinite"></animate>
          <animate
            attributeName="x"
            values="190.47619047619048;187.97619047619048"
            dur="2s"
            repeatCount="indefinite"
          ></animate>
          <animate attributeName="y" values="20;17.5" dur="2s" repeatCount="indefinite"></animate>
        </rect>
        <rect fill="#0de7c2" x="131.42857142857142" y="17.5" width="40" height="5">
          <animate attributeName="width" values="0;40;0" dur="2s" repeatCount="indefinite"></animate>
          <animate
            attributeName="x"
            values="171.42857142857142;131.42857142857142;171.42857142857142"
            dur="2s"
            repeatCount="indefinite"
          ></animate>
        </rect>
      </svg>
    </div>
    <div>
      <svg>
        <defs>
          <linearGradient
            id="percent-pond-gradientId1-e2a739495ebf43df9580122b8355c567"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="0%"
          >
            <stop offset="0%" stop-color="#3DE7C9"></stop>
            <stop offset="100%" stop-color="#00BAFF"></stop>
          </linearGradient>
          <linearGradient
            id="percent-pond-gradientId2-e2a739495ebf43df9580122b8355c567"
            x1="0%"
            y1="0%"
            x2="134%"
            y2="0%"
          >
            <stop offset="0%" stop-color="#3DE7C9"></stop>
            <stop offset="100%" stop-color="#00BAFF"></stop>
          </linearGradient>
        </defs>
        <rect
          x="1.5"
          y="1.5"
          rx="5"
          ry="5"
          fill="transparent"
          stroke-width="3"
          stroke="url(#percent-pond-gradientId1-e2a739495ebf43df9580122b8355c567)"
          width="197"
          height="97"
        ></rect>
        <polyline
          stroke-width="88"
          stroke-dasharray="10,2"
          stroke="url(#percent-pond-gradientId2-e2a739495ebf43df9580122b8355c567)"
          points="
        6, 50
        130.07999999999998, 50.001
      "
        ></polyline>
        <text stroke="#fff" fill="#fff" x="100" y="50">66%</text>
      </svg>
    </div>
    <div>
      <svg>
        <defs>
          <linearGradient
            id="percent-pond-gradientId1-0db650d7c8c6448f9add4a2240929adf"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="0%"
          >
            <stop offset="0%" stop-color="#01c4f9"></stop>
            <stop offset="100%" stop-color="#c135ff"></stop>
          </linearGradient>
          <linearGradient
            id="percent-pond-gradientId2-0db650d7c8c6448f9add4a2240929adf"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="0%"
          >
            <stop offset="0%" stop-color="#01c4f9"></stop>
            <stop offset="100%" stop-color="#c135ff"></stop>
          </linearGradient>
        </defs>
        <rect
          x="1.5"
          y="1.5"
          rx="5"
          ry="5"
          fill="transparent"
          stroke-width="3"
          stroke="url(#percent-pond-gradientId1-0db650d7c8c6448f9add4a2240929adf)"
          width="297"
          height="37"
        ></rect>
        <polyline
          stroke-width="28"
          stroke-dasharray="72,3,144,3,72,3"
          stroke="url(#percent-pond-gradientId2-0db650d7c8c6448f9add4a2240929adf)"
          points="
        6, 20
        294, 20.001
      "
        ></polyline>
        <text stroke="#fff" fill="#fff" x="150" y="20">100%</text>
      </svg>
    </div>
  </section>
</template>
